<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
<head>
<meta charset="utf-8">
<title>首页</title>
<link  type="text/css" rel="stylesheet"  href="<%=request.getContextPath()%>/static/index/css/style.css"/>
<link  type="text/css" rel="stylesheet"  href="<%=request.getContextPath()%>/static/index/css/index.css"/>
<script  src="/static/js/jquery.min.js"></script>
<!-- 动态菜单JS -->
<script type="text/javascript"  src="/static/js/menu.js"></script>
 <!-- 引入 echarts.js -->
 <script src="/static/js/echarts.js"></script>

</head>
<body>
<div class="container">
<%--顶部公共部分--%>
 <jsp:include page="common/top.jsp" />

 <div class="left-menu" style="height:949px;">
   <%--左侧菜单列表--%>
  <jsp:include page="common/left-menu-list.jsp" />

 </div>

 <div class="right-menu">
  <div class="main-hd">
   <div class="page-teb" style="height:887px;">
    <div class="l-tab-links">
     <ul style="left:0;">
      <li class="l-select">
       <a href="/user/index" style="padding:0 25px;">首页</a>
      </li>
     </ul>
    </div>
    <div class="l-tab-content" style="height:851px;">
     <div class="tab-content-item">
      <div class="home">
      <!--成交金额-->
       <div class="space-style">
        <div class="col-xs">
         <a  href="#" class="title-button bg-deep">
          <div class="carousel">
           <div class="left-img">
            <i><img src="<%=request.getContextPath()%>/static/index/img/left-img1.png"></i>
            <p>成交金额</p>
           </div>
           <div class="right-info">4536元</div>
          </div>
         </a>
        </div>
        
         <div class="col-xs">
         <a  href="#" class="title-button bg-red">
          <div class="carousel">
           <div class="left-img bg-color-red">
            <i><img src="<%=request.getContextPath()%>/static/index/img/left-img2.png"></i>
            <p>订单</p>
           </div>
           <div class="right-info">4589笔</div>
          </div>
         </a>
        </div>
        
         <div class="col-xs">
         <a  href="#" class="title-button bg-green">
          <div class="carousel">
           <div class="left-img bg-color-green">
            <i><img src="<%=request.getContextPath()%>/static/index/img/left-img3.png"></i>
            <p>通知</p>
           </div>
           <div class="right-info">125条</div>
          </div>
         </a>
        </div>
        
         <div class="col-xs">
         <a  href="#" class="title-button bg-orange">
          <div class="carousel">
           <div class="left-img bg-color-orange">
            <i><img src="<%=request.getContextPath()%>/static/index/img/left-img4.png"></i>
            <p>待处理</p>
           </div>
           <div class="right-info">10条</div>
          </div>
         </a>
        </div>
        
         <div class="col-xs">
         <a  href="#" class="title-button bg-purple">
          <div class="carousel">
           <div class="left-img bg-color-purple">
            <i><img src="/static/index/img/left-img5.png"></i>
            <p>留言</p>
           </div>
           <div class="right-info">48条</div>
          </div>
         </a>
        </div>
        
         <div class="col-xs">
         <a  href="#" class="title-button bg-yellow">
          <div class="carousel">
           <div class="left-img bg-color-yellow">
            <i><img src="/static/index/img/left-img6.png"></i>
            <p>紧急通知</p>
           </div>
           <div class="right-info">2条</div>
          </div>
         </a>
        </div>
       </div>
       
       <!--折线图-->
       <div class="home-goods panel">
        <div class="home-mychart" style="height:400px;overflow:hidden;">
         <p>销售对比分析</p>
         <%--<img src="<%=request.getContextPath()%>/static/index/img/chart.png">--%>
         <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
         <div id="main" style="width: 600px;height:350px;"></div>
         <script type="text/javascript">
             // 基于准备好的dom，初始化echarts实例
             var myChart = echarts.init(document.getElementById('main'));
             // 指定图表的配置项和数据
             var option = {
                 title: {
                     text: '租车'
                 },
                 tooltip: {},
                 legend: {
                     data:['销量']
                 },
                 xAxis: {
                     data: ["吉普","本田","宝马","奔驰","雷克萨斯","奥迪"]
                 },
                 yAxis: {},
                 series: [{
                     name: '销量',
                     type: 'bar',
                     data: [5, 20, 36, 10, 10, 20]
                 }]
             };

             // 使用刚指定的配置项和数据显示图表。
             myChart.setOption(option);
         </script>
        </div>
       </div>
       
       <!--销售情况-->
       <div class="order-form">
        <div class="col-xs-3 col-lg-7">
         <div class="admin-info">
          <div class="title-name">
           <i></i>
            登录记录
           <a href="#">+更多</a>
          </div>
          <table class="record-list">
           <tbody>
            <tr>
             <td>管理员</td>
             <td>2017-05-26</td>
            </tr>
            
            <tr>
             <td>管理员</td>
             <td>2017-05-26</td>
            </tr>
            
            <tr>
             <td>管理员</td>
             <td>2017-05-26</td>
            </tr>
            
            <tr>
             <td>管理员</td>
             <td>2017-05-26</td>
            </tr>
            
            <tr>
             <td>管理员</td>
             <td>2017-05-26</td>
            </tr>
            
            <tr>
             <td>管理员</td>
             <td>2017-05-26</td>
            </tr>
           </tbody>
          </table>
         </div>
        </div>
        
        <div class="col-xs-6 ranking-style">
         <div class="frame">
          <div class="title-name">
            <i></i>
            商品销售排行
           <a href="#">+更多</a>
          </div>
          <table class="table table-list">
           <thead>
            <tr>
             <th width="50">排名</th>
             <th>商品编号</th>
             <th>商品名称</th>
             <th width="80">销售数量</th>
            </tr>
           </thead>
           <tbody>
            <tr>
             <td>
              <em>1</em>
             </td>
             <td>2355456</td>
             <td><a href="#">景观灯系列</a></td>
             <td>26</td>
            </tr>
            
             <tr>
             <td>
              <em>1</em>
             </td>
             <td>2355456</td>
             <td><a href="#">景观灯系列</a></td>
             <td>26</td>
            </tr>
            
             <tr>
             <td>
              <em>1</em>
             </td>
             <td>2355456</td>
             <td><a href="#">景观灯系列</a></td>
             <td>26</td>
            </tr>
            
             <tr>
             <td>
              <em>1</em>
             </td>
             <td>2355456</td>
             <td><a href="#">景观灯系列</a></td>
             <td>26</td>
            </tr>
            
             <tr>
             <td>
              <em>1</em>
             </td>
             <td>2355456</td>
             <td><a href="#">景观灯系列</a></td>
             <td>26</td>
            </tr>
           </tbody>
          </table>
         </div>
        </div>
       </div>
      </div>
     </div>
    </div>
   </div>
  </div>
 </div>
</div>
</body>
</html>
